<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .buttonGroups {
            padding: 10px 10px;
        }

        .wrap {
            width: 1100px;
            height: 600px;
            border: 1px solid #333;
            margin: 10px;
            margin-top: 0;
            position: relative;
        }

        .wrap .sub {
            width: 100px;
            height: 100px;
            background-color: #6ff;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="buttonGroups">
        <button>开始</button>
        <button>开始(恐怖回调版)</button>
        <button>开始(链式运动版)</button>
    </div>
    <div class="wrap">
        <div class="sub"></div>
    </div>
</body>
<script>
    // js封装  =>   animate(ele,attr,end,aniType,fn)

    // jquery运动  $(ele).animate(params,speed,callback)
    // ele     运动的元素
    // params  运动的属性及其终点值    {left:1000,top:500}  => 可以实现多属性运动 
    // speed   运动的方式   三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
    // callback  在运动完成时执行的函数，每个元素执行一次。

    $("button").eq(0).click(function () {
        // $(".sub").animate({ left:1000 }, "normal");
        // $(".sub").animate({ top: 500 }, "normal");
        $(".sub").animate({left:950,top:450,width:150,height:150},5000)
        .animate({left:0,top:0,width:100,height:100},2500)
    })

    $("button").eq(1).click(function () {
        $(".sub").animate({ left: 1000 }, "slow", function () {
            $(".sub").animate({ top: 500 }, 1000, function () {
                $(".sub").animate({ left: 0 }, 2000, function () {
                    $(".sub").animate({ top: 0 }, "fast")
                })
            })
        })
    })

    $("button").eq(2).click(function(){
        $(".sub").animate({ left: 1000 }, "slow")
        .animate({ top: 500 }, 1000)
        .animate({ left: 0 }, 3000)
        .animate({ top: 0 }, "fast")
    })

    
</script>

</html>